<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>播放列表</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@0.4.3/dist/css/mdui.min.css">
</head>
<body class="mdui-theme-layout-dark mdui-theme-primary-grey mdui-theme-accent-red mdui-bottom-nav-fixed mdui-appbar-with-toolbar">
  <div class="mdui-appbar mdui-appbar-fixed">
    <div class="mdui-toolbar mdui-color-theme">
      <a href="/" class="mdui-typo-headline">FreeHLS</a>
      <a href="javascript:;" class="mdui-typo-title">播放列表</a>
      <div class="mdui-toolbar-spacer"></div>
      <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>
    </div>
  </div>

  <div class="mdui-container-fluid">
    
    <!-- 标题 -->
    <div class="mdui-row mdui-m-y-3">
      <div class="mdui-col-xs-6 mdui-col-offset-xs-3">
        <h1 class="mdui-text-center">{{ tag.name }}</h1>
      </div>
    </div>

    <!-- 播放器 -->
    <div class="mdui-row mdui-m-y-3">
      <div class="mdui-col-xs-6 mdui-col-offset-xs-3">
        <iframe src="/play/{{watch}}?notitle=1" frameborder="0" width="100%" height="400"></iframe>
      </div>
    </div>

    <!-- 视频列表 -->
    <div class="mdui-row mdui-m-y-3">
      <div class="mdui-col-xs-6 mdui-col-offset-xs-3">
        <h2>视频列表</h2>
        <ul class="mdui-list mdui-color-theme-800 mdui-m-b-3">
          {% for video in videos %}
          <li watch="{{video.slug}}" class="mdui-list-item mdui-ripple {{ 'mdui-color-theme-600' if watch == video.slug else '' }}">
            <i class="mdui-list-item-avatar mdui-icon material-icons mdui-color-secondx mdui-color-theme-700">play_arrow</i>
            <div class="mdui-list-item-content">
              <div class="mdui-list-item-title">{{ video.title }}</div>
              <div class="mdui-list-item-text">发布于 {{ video.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</div>
            </div>
          </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/mdui@0.4.3/dist/js/mdui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script>
$('[watch]').click(function (e) {
  var watch = $(this).attr('watch');
  $('iframe').get(0).contentWindow.location.replace('/play/' + watch + '?notitle=1');
  $('[watch]').addClass('mdui-color-theme-600').not(this).removeClass('mdui-color-theme-600');

  if (e.originalEvent) {
    history.pushState({watch: watch}, '', '/playlist/{{tag.id}}?watch=' + watch);
  }
});

window.addEventListener('popstate', function (e) {
  $('[watch=' + (e.state ? e.state.watch : '{{watch}}') + ']').click();
});
</script>
</html>